<template>
  <div class="home">
    <swiper />
    <div class="section" v-for="(item,index) in songList" :key="index">
      <div class="section-title">{{item.name}}</div>
      <content-list :contentList="item.list"></content-list>
    </div>
  </div>
</template>

<script>
import Swiper from '@/components/Swiper'
import {getAllSinger,getAllSongList} from '@/api/index'
import ContentList from '@/components/ContentList.vue'
export default {
    name: 'home',
    components: {
      Swiper,
      ContentList,
    },
    props: {},
    data () {
      return {
        songList: [
          {name: '歌单', list: []},
          {name: '歌手', list: []},
        ]
      }
    },
    computed: {},
    watch: {},
    created () {
      this.getSongList();
      this.getSinger();
    },
    methods: {
      getSongList() {
        getAllSongList().then(res => {
          this.songList[0].list = res.slice(0,10); // 获取前十条歌单
        }).catch(err => {
          console.log(err);
        })
      },
      getSinger() {
        getAllSinger().then(res => {
          this.songList[1].list = res.slice(0,10); // 获取前十个歌手
        }).catch(err => {
          console.log(err);
        })
      },
    }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/home.scss';
</style>